<template>
  <div>
    <Row>
      <i-col span="24" class="y_query_right">
        <span class="query_item">用户名:
          <Input v-model.trim="searchParams.userName" placeholder="必须输入用户全称" :disabled="searchParams.isRepeated" clearable class="modal_newuser_form_input" style="margin-right: 0;"></Input>
        </span>
        <span class="query_item">推广员工:
          <SearchEmployee @chooseEmployee="chooseEmployee" :choosed="choosedEmployee" :clear="searchParams.isRepeated"/>
        </span>
        <Checkbox v-model="searchParams.isRepeated" :on-change="repeatCheckChange" style="margin: 0.5rem 1rem 0 0;">同一用户对应多位推广同事 </Checkbox>
        <Button type="primary" icon="md-search" @click="search" class="y_condition">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
    <Table stripe border ref="userInfo" :columns="userEmployeeTable" @on-sort-change="sortChange" :data="userEmployeeList" class="table_css"
           no-data-text="暂无数据" @on-selection-change="userSelectedChanged" ></Table>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>
    <Modal
      v-model="status.modalUserInfo.isShow"
      title="用户详情"
      :styles="{top: '20px',bottom:'20px',width:'50%'}"
      :scrollable=false >
      <row style="font-size:14px">
        <i-col span="4" class="tiy_key" >First Name :</i-col>
        <i-col span="8">{{searchParams.showUserInfo.firstName}}</i-col>
        <i-col span="4" class="tiy_key">Last Name :</i-col>
        <i-col span="8">{{searchParams.showUserInfo.lastName}}</i-col>
      </row>
      <row style="font-size:14px">
        <i-col span="4" class="tiy_key" >国家 :</i-col>
        <i-col span="8">{{searchParams.showUserInfo.country}}</i-col>
        <i-col span="4" class="tiy_key" v-if="searchParams.showUserInfo.source">下载来源:</i-col>
        <i-col span="8">{{searchParams.showUserInfo.source}}</i-col>
      </row>
      <row style="font-size:14px">
        <i-col span="4" class="tiy_key" v-if="searchParams.showUserInfo.inviteCode">邀请码:</i-col>
        <i-col span="8">{{searchParams.showUserInfo.inviteCode}}</i-col>
        <i-col span="4"  class="tiy_key" v-if="searchParams.showUserInfo.useContent">采购用途:</i-col>
        <i-col span="8">{{searchParams.showUserInfo.useContent}}</i-col>
      </row>
    </Modal>

    <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col"
  import tiyData from "./js/userEmployee/user_employee_data"
  import {
    init,
    webList,
    userInfo,
  } from "./js/userEmployee/user_employee_funs"
  import SearchEmployee from "../widgets/SearchEmployee";

  export default {
    components: {SearchEmployee, ICol},
    data(){
      return {
        tRole:{
        },
        tPage: tiyData.tPage,
        status: tiyData.tStatus,

        //搜索条件
        searchParams: tiyData.tParams,
        tData :tiyData.tData,
        userEmployeeList: tiyData.tData.userEmployeeList,
        loginTypeDict: this.$store.getters.dictionaries.loginTypeDict,
        userEmployeeTable: tiyData.userEmployeeTable(this),
        choosedEmployee:{}
      }
    },
    computed : {

    },
    methods: {
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      sortChange(column){
        tiyData.tPage.total = 1;
        tiyData.tPage.startIndex = 0;
        tiyData.tPage.stepNumber = 20;
        tiyData.tPage.currentPage = 1;
        if('normal' == column.order){
          tiyData.tParams.orderBy = '';
        }else{
          tiyData.tParams.orderBy = column.key +' '+ column.order;
        }
        webList(this,tiyData);
      },
      chooseEmployee(value){
        if (value != null){
            tiyData.tParams.employeeId = value.id;
        } else {
            tiyData.tParams.employeeId = "";
        }
      },
      showUserInfo(index){
        userInfo(this,tiyData,index);
      },
      repeatCheckChange(){
        if(this.searchParams.isRepeated){
            tiyData.tParams.userName = "";
            tiyData.tParams.employeeId = "";
        }
      },
      userSelectedChanged(selection){
        tiyData.tParams.selectedUsers = selection;
        if(tiyData.tParams.selectedUsers.length > 0){
            this.status.showCouponEnable = true;
        } else {
            this.status.showCouponEnable = false;
        }
      },
    },
    mounted(){
      init(this, tiyData);
    },
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }
  .info_key {
    color: #9e9e9e;
    font-size: 10px;
  }

  .query_item {
    margin: 0.5rem 1rem 0 0;
    display: inline-block;
  }
</style>
